<template>
  <view class="modalWrap" v-if="isLogin">
    <u-transition :show="show" mode="slide-up">
      <view class="topWrap">
        <view class="btnItem" @click="goShopCart">
          <u-icon name="shopping-cart" color="#333" :size="48"></u-icon>
        </view>
      </view>
    </u-transition>
    <view @click="changeShow" class="bottomBtn">
      <u-icon :name="show ? 'close' : 'more-dot-fill'" color="#333" :size="36"></u-icon>
    </view>
  </view>
</template>

<script>

export default {
  props: {
    isLogin: {
      type: Boolean,
      default: () => false
    },
  },
  data() {
    return {
      show: true,
    }
  },
  methods: {
    changeShow() {
      this.show = !this.show;
    },
    goShopCart() {
      uni.navigateTo({
        url: '/pages/shopCart/index'
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.modalWrap {
  position: fixed;
  bottom: calc(160rpx + env(safe-area-inset-bottom) / 2);
  right: 72rpx;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.topWrap {
  width: 98rpx;
  border-radius: 49rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32rpx;
  overflow: hidden;
  border: 1rpx solid #f2f2f2;
  background-color: #fff;
}
.btnItem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 98rpx;
  height: 98rpx;
}
.bottomBtn {
  height: 98rpx;
  width: 98rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1rpx solid #f2f2f2;
  position: relative;
  z-index: 2;
}
</style>